<template>
  <view class="select-product flexc">
    <view class="search-box">
      <view class="search flex">
        <image src="/static/order/search.png" mode="aspectFit"></image>
        <input
          class="flex1"
          type="text"
          v-model="searchVal"
          @confirm="getSearch"
          placeholder="搜索产品效率更高" />
        <image
          src="/static/order/c.png"
          v-show="searchVal.length > 0"
          mode="aspectFit"
          class="close"
          @click="closeSearch"></image>
      </view>
    </view>
    <!-- 默认展示页面，没有进行搜索的时候 -->
    <view class="flex1 flex over" v-if="!isSearch">
      <view class="left">
        <scroll-view scroll-y="true" style="height: 100%">
          <view class="wrap">
            <view
              :class="leftIndex == index ? 'ac' : ''"
              v-for="(item, index) in leftList"
              :key="index"
              @click="leftBtn(index)">
              {{ item.title }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="content flex1">
        <scroll-view scroll-y="true" style="height: 100%">
          <view class="wrap">
            <view
              :class="contentIndex == index ? 'ac1' : ''"
              v-for="(item, index) in contentList"
              :key="index"
              @click="contentBtn(index)">
              {{ item.model_number }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="right flex1">
        <scroll-view scroll-y="true" style="height: 100%">
          <view class="wrap">
            <view
              :class="['flex-between', rightIndex == index ? 'ac2' : '']"
              v-for="(item, index) in rightList"
              :key="index"
              @click="rightBtn(index)">
              <text>{{ item.specifications }}</text>
              <u-icon
                v-if="rightIndex == index"
                name="checkbox-mark"
                size="20"
                color="#da4334"></u-icon>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="flex1 over box" v-if="isSearch">
      <view
        class="box-w"
        v-for="(item, index) in searchComputed"
        :key="index"
        @click="setBtn(item)">
        <view class="flex">
          <text
            :class="['box-t', val.s == 1 ? 'box-ac' : '']"
            v-for="val in item.titleList"
            :key="val">
            {{ val.t }}
          </text>
        </view>
        <view class="flex box-mt">
          <text>型号：{{ item.model_number }} —</text>
          <text>规格：{{ item.specifications }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSearch: false,
      leftList: [
        "白条鸭",
        "副品鸭A级",
        "副品鸭B级",
        "带翅掌白条",
        "带翅白条(6只)",
        "西装鸭",
        "鸭屯",
        "鸭掌",
        "鸭舌",
      ],
      contentList: ["10只", "8只"],
      rightList: ["7.5", "8.0", "8.5", "9.0", "10.0"],
      leftIndex: 0,
      contentIndex: 0,
      rightIndex: 0,
      searchList: [
        { title: "白条鸭", sku: "7.5kg", xh: "10只" },
        { title: "白条鸭", sku: "9.0kg", xh: "13只" },
      ],
      searchVal: "",
    };
  },
  computed: {
    searchComputed() {
      const arr = this.searchList.map((item) => {
        const title = item.title.split("");
        item.titleList = [];

        title.forEach((val) => {
          let obj = {
            t: "",
            s: 0,
          };
          if (this.searchVal.indexOf(val) > -1) {
            obj.s = 1;
            obj.t = val;
          } else {
            obj.t = val;
            obj.s = 0;
          }
          console.log(obj, "obj--------");
          item.titleList.push(obj);
        });

        return item;
      });
      console.log(arr, "arr=====");
      return arr;
    },
  },
  created() {
    this.getProductTitle();
  },
  methods: {
    setBtn(item) {
      uni.setStorageSync(
        "productList",
        JSON.stringify({
          product_title: item.title,
          specifications: item.specifications,
          product_id: item.product_id,
          model_number: item.model_number,
        })
      );
      this.toBack();
    },
    getSearch() {
      this.$api({
        url: "/product_list",
        method: "get",
        data: {
          keyword: this.searchVal,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.isSearch = true;
          this.searchList = res.data.list;
        }
      });
    },
    closeSearch() {
      this.isSearch = false;
      this.searchVal = "";
      this.getProductTitle();
    },
    rightBtn(k) {
      this.rightIndex = k;
      uni.setStorageSync(
        "productList",
        JSON.stringify({
          product_title: this.leftList[this.leftIndex].title,
          specifications: this.rightList[k].specifications,
          product_id: this.rightList[k].product_id,
          model_number: this.contentList[this.contentIndex].model_number,
        })
      );
      this.toBack();
    },
    leftBtn(k) {
      this.leftIndex = k;
      this.getProductList(this.leftList[k].title);
    },
    contentBtn(k) {
      this.contentIndex = k;
      this.getSkuList(
        this.leftList[this.leftIndex].title,
        this.contentList[k].model_number
      );
    },
    //获取产品名称
    getProductTitle() {
      this.leftList = [];
      this.$api({
        url: "/product_title",
        method: "get",
        data: {},
      }).then((res) => {
        if (res.code === 200) {
          this.leftList = res.data;
          this.getProductList(this.leftList[0].title);
        }
      });
    },
    getProductList(product_title = "") {
      this.contentList = [];
      this.$api({
        url: "/product_model_number",
        method: "get",
        data: {
          product_title,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.contentList = res.data;
          this.getSkuList(product_title, this.contentList[0].model_number);
        }
      });
    },
    // 获取产品规格
    getSkuList(product_title, model_number) {
      this.rightList = [];
      this.$api({
        url: "/product_specifications",
        method: "get",
        data: { product_title, model_number },
      }).then((res) => {
        if (res.code === 200) {
          this.rightList = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-product {
  width: 100%;
  height: 100%;
  .search-box {
    background: #fff;
  }
  .search {
    margin: 24upx auto;
    width: 674rpx;
    height: 80rpx;
    background: #f6f7f9;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    padding: 24upx 20upx 24upx 32upx;
    & > image {
      width: 32upx;
      height: 32upx;
    }

    & > input {
      font-size: 28upx;
      margin-left: 18upx;
    }
    ::-webkit-input-placeholder {
      color: #9695a3;
    }
  }
  .left {
    width: 208upx;
    height: 100%;
    background: #fff;
    .wrap {
      padding: 40upx 28upx 0 40upx;
      box-sizing: border-box;
      height: 100%;
      & > view {
        font-size: 28rpx;
        color: #3d3d3d;
        margin-bottom: 84upx;
      }
      .ac {
        color: #da4334;
        position: relative;
      }
      .ac::after {
        position: absolute;
        content: "";
        width: 8rpx;
        height: 38rpx;
        background: #da4334;
        border-radius: 56rpx 56rpx 56rpx 56rpx;
        top: 0;
        left: -40upx;
      }
    }
  }
  .content {
    width: 272upx;
    height: 100%;
    background: #f9f9f9;
    .wrap {
      padding: 40upx 44upx;
      box-sizing: border-box;
      height: 100%;
      & > view {
        font-size: 28rpx;
        color: #3d3d3d;
        margin-bottom: 84upx;
      }
      .ac1 {
        color: #da4334;
      }
    }
  }
  .right {
    width: 272upx;
    height: 100%;
    background: #f4f4f4;
    .wrap {
      box-sizing: border-box;
      height: 100%;
      padding: 40upx 50upx 40upx 44upx;
      & > view {
        font-size: 28rpx;
        color: #3d3d3d;
        margin-bottom: 84upx;
      }
      .ac2 {
        color: #da4334;
      }
    }
  }
  .box {
    padding: 12upx 34upx 12upx 38upx;
    background: #fff;
    &-w {
      padding: 32upx 0;
      border-bottom: 1rpx solid #eeeeee;
    }
    &-t {
      font-size: 32rpx;
      color: #171717;
    }
    &-ac {
      color: #da4334;
    }
    &-mt {
      font-size: 28rpx;
      color: #9695a3;
      margin-top: 20upx;
    }
  }
}
</style>
